<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8"/>
    <title>MVCPlus基础框架 | 用户登陆</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>

    <!-- ================== BEGIN BASE CSS STYLE ================== -->
    <link href="${basePath}/assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
    <link href="${basePath}/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="${basePath}/assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="${basePath}/assets/css/animate.min.css" rel="stylesheet"/>
    <link href="${basePath}/assets/css/style.min.css" rel="stylesheet"/>
    <link href="${basePath}/assets/css/style-responsive.min.css" rel="stylesheet"/>
    <link href="${basePath}/assets/css/theme/default.css" rel="stylesheet" id="theme"/>
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== BEGIN BASE JS ================== -->
    <script src="${basePath}/assets/plugins/pace/pace.min.js"></script>
    <!-- ================== END BASE JS ================== -->
</head>
<body class="pace-top" style='font-family: "Microsoft YaHei","微软雅黑"'>
<!-- begin #page-loader -->
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- end #page-loader -->

<div class="login-cover">
    <div class="login-cover-image"><img src="${basePath}/assets/img/bg-1.jpg" data-id="login-cover-image" alt=""/></div>
    <div class="login-cover-bg"></div>
</div>
<!-- begin #page-container -->
<div id="page-container" class="fade">
    <!-- begin login -->
    <div class="login login-v2" data-pageload-addclass="animated fadeIn">
        <!-- begin brand -->
        <div class="login-header">
            <div class="brand">
            <#--<span class="logo"></span>--> MVCPlus基础框架后台登陆
            <#-- <small>用户登陆</small>-->
            </div>
        <#--<div class="icon">
            <i class="fa fa-sign-in"></i>
        </div>-->
        </div>
        <!-- end brand -->
        <div class="login-content">
            <form id="loginform" method="post" class="margin-bottom-0">
                <div class="form-group m-b-20">
                    <input type="text" name="email" class="form-control input-lg" placeholder="请输入用户名"/>
                </div>
                <div class="form-group m-b-20">
                    <input type="password" name="password" class="form-control input-lg" placeholder="请输入密码"/>
                </div>
                <div class="checkbox m-b-10">
                    <label>
                        <input type="checkbox" checked/> 记住密码
                    </label>
                </div>
                <div id="login_err" class="m-b-10 " style="color: red"></div>
                <div class="login-buttons">
                    <button type="submit" class="btn btn-success btn-block btn-lg">登&nbsp;&nbsp;陆</button>
                </div>
            <#--<div class="m-t-20">
                Not a member yet? Click <a href="#">here</a> to register.
            </div>-->
            </form>
        </div>
    </div>
    <!-- end login -->

    <ul class="login-bg-list">
        <li class="active"><a href="#" data-click="change-bg"><img src="${basePath}/assets/img/bg-1.jpg" alt=""/></a>
        </li>
        <li><a href="#" data-click="change-bg"><img src="${basePath}/assets/img/bg-2.jpg" alt=""/></a></li>
        <li><a href="#" data-click="change-bg"><img src="${basePath}/assets/img/bg-3.jpg" alt=""/></a></li>
        <li><a href="#" data-click="change-bg"><img src="${basePath}/assets/img/bg-4.jpg" alt=""/></a></li>
    </ul>

</div>
<!-- end page container -->

<!-- ================== BEGIN BASE JS ================== -->
<script src="${basePath}/assets/plugins/jquery/jquery-1.9.1.min.js"></script>
<script src="${basePath}/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
<script src="${basePath}/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>
<script src="${basePath}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="${basePath}/assets/crossbrowserjs/html5shiv.js"></script>
<script src="${basePath}/assets/crossbrowserjs/respond.min.js"></script>
<script src="${basePath}/assets/crossbrowserjs/excanvas.min.js"></script>
<![endif]-->
<script src="${basePath}/assets/plugins/jquery-hashchange/jquery.hashchange.min.js"></script>
<script src="${basePath}/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${basePath}/assets/plugins/jquery-cookie/jquery.cookie.js"></script>
<script src="${basePath}/assets/plugins/layer/layer.js"></script>
<!-- ================== END BASE JS ================== -->

<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="${basePath}/assets/js/apps.js"></script>
<!-- ================== END PAGE LEVEL JS ================== -->
<script>
    var handleLoginPageChangeBackground = function () {
        $('[data-click="change-bg"]').live('click', function () {
            var targetImage = '[data-id="login-cover-image"]';
            var targetImageSrc = $(this).find('img').attr('src');
            var targetImageHtml = '<img src="' + targetImageSrc + '" data-id="login-cover-image" />';

            $('.login-cover-image').prepend(targetImageHtml);
            $(targetImage).not('[src="' + targetImageSrc + '"]').fadeOut('slow', function () {
                $(this).remove();
            });
            $('[data-click="change-bg"]').closest('li').removeClass('active');
            $(this).closest('li').addClass('active');
        });
    };

    var LoginV2 = function () {
        "use strict";
        return {
            //main function
            init: function () {
                handleLoginPageChangeBackground();
            }
        };
    }();
</script>


<script>
    $(document).ready(function () {
        App.init(ajax = true);
        LoginV2.init();
    });


    /*登陆提交*/
    $("#loginform").submit(function (event) {
        if ($("input:first").val() === '') {
            $("#login_err").text("请输入用户名！").show().fadeOut(1000)
            return false;
        }
        var _ii = layer.msg('加载中', {icon: 16});
        $.ajax({
            type: "POST",
            url: '/main/login',
            dataType: 'json',
            data: $("#loginform").serialize(),
            success: function (data) {
                layer.close(_ii);
                if (data.success) {
                    window.location.href = '${basePath}/main/index'
                } else {
                    $("#login_err").text(data.msg).show().fadeOut(3000)
                }
            },
            error: function (data) {
                layer.close(_ii);
                $("#login_err").text("登陆出错！").show().fadeOut(3000)
                //alert("error:" + data.responseText)
            }
        })
        event.preventDefault();
    })

</script>
</body>
</html>
